<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>标签管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
</head>
<body>
	<div class="demoTable" style="padding:10px 0 0 15px">
    	配件名称
    	<div class="layui-inline">
        	<input class="layui-input" name="keyWord" id="keyWord" autocomplete="off">
    	</div> &nbsp; &nbsp; &nbsp; &nbsp;
    	<button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
	</div>
	
	<table class="layui-hide" id="test" lay-filter="test"></table>
	
<div id="formDiv" hidden>
	<form class="layui-form" id="addform">
		<div class="layui-form-item">
			<input type="hidden" id="rid" name="rid">
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">配件编号</label>
				<div class="layui-input-inline" style="width:500px">
					<select id="partNumber" name="partNumber" class="layui-select" lay-search="" lay-filter="partNumber">
						<option value="">请选择配件编号</option>
						<c:forEach items="${partList }" var="part">
							<option value="${part.panum }">${part.panum }</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<font style="color:red; font-size: 24px;">*</font>
		    </div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">配件名称</label><input lay-verify="partName" class="layui-input" type="text" id="partName" name="partName" style="width:500px">
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">标签规则</label>
				<div class="layui-input-block" style="width:500px">
               		<input type="text" name="partPamodel" id="partPamodel" class="layui-input" style="position:absolute;z-index:2;width:80%;" lay-verify="required" onkeyup="search()" autocomplete="off">
					
					<select type="text" id="hc_select"  lay-filter="hc_select" autocomplete="off" class="layui-select" lay-search>
		      			<option value="产地-M-膜丝种类-年份-周数-序列号">产地-M-膜丝种类-年份-周数-序列号</option>
						<option value="产地-P-膜组件外形尺寸-膜丝种类-年份-序列号">产地-P-膜组件外形尺寸-膜丝种类-年份-序列号</option>
		      		</select>
				</div>
  			</div>
				
			<div class="layui-inline">
				<font style="color:red; font-size: 24px;">*</font>
		    </div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">备注</label><input lay-verify="rname" class="layui-input" type="text" id="rname" name="rname" style="width:500px">
		</div>
		<button class="layui-btn layui-btn-blue" lay-submit lay-filter="addform" style="margin-left:240px">提交</button>&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</form>
</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-blue" lay-event="add"><i class="layui-icon layui-icon-add-1">  新增</i></button>
		<button class="layui-btn layui-btn-blue" lay-event="delete"><i class="layui-icon layui-icon-delete">批量删除</i></button>
	</div>
</script>
 
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>

<script>
layui.use(['table','layer','upload','form','laydate'], function(){
	var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
	  var table = layui.table;
	  var layer = layui.layer;
	  var laydate = layui.laydate;
	  var form = layui.form; 
	  form.render();
	
	
	form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框
        $("#partPamodel").val(data.value);
        $("#hc_select").next().find("dl").css({ "display": "none" });
        form.render();
    });

    window.search = function () {
        var value = $("#partPamodel").val();
        $("#hc_select").val(value);
        form.render();
        $("#hc_select").next().find("dl").css({ "display": "block" });
        var dl = $("#hc_select").next().find("dl").children();
        var j = -1;
        for (var i = 0; i < dl.length; i++) {
            if (dl[i].innerHTML.indexOf(value) <= -1) {
                dl[i].style.display = "none";
                j++;
            }
            if (j == dl.length-1) {
                $("#hc_select").next().find("dl").css({ "display": "none" });
            }
        }
        
    }
	
	
	var $ = layui.jquery, active = {
			reload:function () {
				var partName = $("#keyWord").val();
				table.reload('contenttable',{
					method:'get',
					where:{partName: partName},
					page:{
						curr:1  //重新从第一页开始
					}
				}); 
			}
		}
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	table.render({
	    elem: '#test'
	    ,url:'${pageContext.request.contextPath }/labelMana/listPageLabel.do'
	    ,toolbar: '#toolbarDemo'
	    ,title: '标签'
	    ,id :'contenttable'
	    ,limits:[10,20,30]
	    ,cols: [[
	    	{type: 'checkbox', fixed: 'left'}
	      ,{field:'partName', title:'配件名称', edit: 'text'}
	      ,{field:'partNumber', title:'配件编码', edit: 'text'}
	      ,{field:'partPamodel', title:'标签规则', edit: 'text'}
	      ,{field:'rname', title:'备注', edit: 'text'}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	    ]]
	    ,page: true
	});
  
	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	    	case 'add':
	    		layer.open({
					  type: 1 		//Page层类型
					  ,area: ['700px', '500px'] //宽  高
					  ,title: '新增'
					  ,shade: 0.1 	//遮罩透明度
					  ,shadeClose: true //点击遮罩关闭
					  ,maxmin: true //允许全屏最小化
					  ,anim: 1 		//0-6的动画形式，-1不开启
					  ,content: $('#formDiv')
					  ,success: function () {
						  document.getElementById("addform").reset();
					  }
					  ,end: function () {
						  var formDiv = document.getElementById('formDiv');
						  formDiv.style.display = '';
					  }
					});
	      	break;
	    	case 'delete':
	        	var data = checkStatus.data;
	        	var str = "";
	        	if(data.length==0){
	        		toastr.warning("请至少选择一条记录！");
	        	}
	        	for(var i=0;i<data.length;i++){
	        		str += data[i].rid;
	        		if(i != data.length-1){
	        			str += ",";
	        		}
	        	}
	        	layer.confirm('确定删除吗？', function(index){
	        		$.ajax({
				    	type:'post',
				    	url:'${pageContext.request.contextPath }/labelMana/deleteLabel.do',
				    	data:{"str" : str},
				    	success:function(data){
				    		if(data>0){
				    			toastr.success("删除成功！");
				    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
									//关闭模态框
									// 父页面刷新
									window.location.reload();  
								},2000); 
				    		}else{
				    			toastr.warning("删除失败！");
				    		}
				    	}
				    }); 
	        	});
	      	break;
	      	case 'select':
	      		console.log(obj)
	      	break;
	    };
	});
  
	//监听行工具事件
	table.on('tool(test)', function(obj){
		var data = obj.data;
		if(obj.event === 'del'){
		  layer.confirm('确定删除吗？', function(index){
		    var rid = obj.data.rid;
		    $.ajax({
		    	type:'post',
		    	url:'${pageContext.request.contextPath }/labelMana/deleteLabel.do',
		    	data:{"str":rid},
		    	dataType : "json",
		    	success:function(data){
		    		if(data>0){
		    			toastr.success("删除成功！");
		    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							window.location.reload();  
						},2000);
		    		}else{
		    			toastr.warning("删除失败！");
		    		}
		    	}
		    })
		    layer.close(index);
		  });
		} else if(obj.event === 'edit'){
			layer.open({
				  type: 1 		//Page层类型
				  ,area: ['700px', '500px'] //宽  高
				  ,title: '编辑'
				  ,shade: 0.1 	//遮罩透明度
				  ,maxmin: true //允许全屏最小化
				  ,anim: 1 		//0-6的动画形式，-1不开启
				  ,content: $('#formDiv')
				  ,success: function () {
					//回显表单数据
					for(var i=0;i<Object.entries(data).length;i++) {
						var id = '#' + Object.entries(data)[i][0];
						var text = Object.entries(data)[i][1];
						$(id).val(text);
					}
					form.render();
				  }	
				  ,end: function () {
				  	var formDiv = document.getElementById('formDiv');
				  	formDiv.style.display = '';
			  	  }
			});
		}
	});
	/**
     * 表单校验
     */
     form.verify({
    	//value：表单的值、item：表单的DOM对象
    	partNumber: function(value){
    		if(value == ''){
    			return '配件编号不能为空';
    		}
    	},
    	/* partName: function(value){
    		if(value == ''){
    			return '配件名称不能为空';
    		}
    	},
    	partPamodel: function(value){
    		if(value == ''){
    			return '标签规则不能为空';              
    		}
    	}, */
    }); 
    /**
     * 通用表单提交(AJAX方式)（新增）
     */
    form.on('submit(addform)', function (data) {
    	$("#submit").attr("disabled",true);
    	$.ajax({
   			url : '${pageContext.request.contextPath }/labelMana/saveLabel.do',
   			data : $('#addform').serialize(),
   			type : "post",
   			dataType : "json",
   			}).done(
   				function(res) {
   					if (res > 0) {
   						toastr.success('保存成功！');
   					}else{
   						toastr.error('保存失败！');
   					}
					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						//关闭模态框
						// 父页面刷新
						window.location.reload();
					},2000);
   				}
   			).fail(
   				function(res) {
   					toastr.error('保存失败！');
   				}
   			)
		return false;
    });
    
	//选择配件编号 查询配件名称 赋值给input框
	form.on('select(partNumber)', function (data) {   
		var partNumber = $('#partNumber').val();
		$.ajax({
		   	type:'post',
		   	url:'${pageContext.request.contextPath }/partMana/getPartByNumber.do',
		   	data:{"partNumber":partNumber},
		   	success:function(data){
		   		$('#partName').val(data);
		   	}
		})
    });
	
});


toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上
</script>
</body>
</html>